<template>
  <div class="requirementInfo-component">
    <item-title title="需求信息" />
    <div v-if="requirementDetail" class="info-container">
      <el-form ref="elForm" :model="requirementDetail" size="small" label-width="120px">
        <el-row
          :gutter="15"
          class="form-row01"
          style="margin-left:0px;margin-right:0px;display:flex;justify-content:flex-start;flex-wrap:wrap;"
        >
          <el-form-item label="需求编号：" style="width:33.333%;">
            <div class="text-line-2">{{ requirementDetail.demand_no||"无" }}</div>
          </el-form-item>
          <el-form-item label="项目名称：" style="width:33.333%;">
            <div class="text-line-2">{{ requirementDetail.project_name||"无" }}</div>
          </el-form-item>
          <el-form-item label="项目类型：" style="width:33.333%;">
            <div class="text-line-2">{{ requirementDetail.project_type||"无" }}</div>
          </el-form-item>
          <el-form-item label="优先级：" style="width:33.333%;">
            <div class="text-line-2">{{ requirementDetail.priority||"无" }}</div>
          </el-form-item>
          <el-form-item label="需求来源：" style="width:33.333%;">
            <div class="text-line-2">{{ requirementDetail.demand_source||"无" }}</div>
          </el-form-item>
          <el-form-item label="申报类别：" style="width:33.333%;">
            <div class="text-line-2">{{ requirementDetail.apply_type||"无" }}</div>
          </el-form-item>
          <el-form-item label="治疗领域：" style="width:33.333%;">
            <div class="text-line-2">{{ requirementDetail.treat_field||"无" }}</div>
          </el-form-item>
          <el-form-item label="适应症：" style="width:33.333%;">
            <div class="text-line-2">{{ requirementDetail.indication||"无" }}</div>
          </el-form-item>
          <el-form-item label="剂型与规格：" style="width:33.333%;">
            <div class="text-line-2">{{ requirementDetail.dosage_norms||"无" }}</div>
          </el-form-item>
          <el-form-item v-if="requirementDetail.project_approval_name" label="立项申请名称：" style="width:33.333%;">
            <div class="tag-container"><el-button type="text" size="medium" class="tag-hover text-line-1" style="padding: 8px 0px" @click="toLookInfoDetail">{{ requirementDetail.project_approval_name }}</el-button></div>
          </el-form-item>
        </el-row>
        <el-row v-if="unfold" :gutter="15" style="margin-left:0px;margin-right:0px;">
          <el-form-item label="质量标准来源：">
            <div>{{ requirementDetail.quality_source||"无" }}</div>
          </el-form-item>
          <el-form-item label="国内研发状态：">
            <div>{{ requirementDetail.internal_research||"无" }}</div>
          </el-form-item>
          <el-form-item label="国外研发状态：">
            <div>{{ requirementDetail.abroad_research||"无" }}</div>
          </el-form-item>
          <el-form-item label="其他说明：">
            <div>{{ requirementDetail.remark||"无" }}</div>
          </el-form-item>
          <el-form-item label="附件：">
            <file-preview :file-list="requirementDetail.enclosure" />
          </el-form-item>
        </el-row>
      </el-form>
      <div class="btn-container">
        <div class="line" />
        <div class="btn-con" @click="unfoldOption"><i class="el-icon-arrow-left" /><span v-if="unfold">收起</span><span v-else>展开</span><i
          class="el-icon-arrow-right"
        /></div>
        <div class="line" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    requirementDetail: {
      type: Object,
      default: () => {}
    },
    from: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      unfold: false
    }
  },

  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {
    unfoldOption() {
      this.unfold = !this.unfold
    },
    toLookInfoDetail() {
      if (this.checkDetailPermis(['project:my:list'])) {
        const from = this.from || ''
        this.$router.push({
          name: 'projectDetail',
          query: {
            projectId: this.requirementDetail.project_approval_id,
            from: from
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "@/assets/scss/views/requirements/modules/requirementInfo.scss";
</style>
